﻿<%@ Page Language="C#" MasterPageFile="~/Demo/DemoMaster.master" %>

<asp:Content ID="Content1" ContentPlaceHolderID="demoheader" runat="Server">
    Basic functionalities
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="demosubheader" runat="Server">
    Server call, pagination, searching, insertion, updating, deletion, sorting
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="democontent" runat="Server">
    <script type="text/javascript" src="../jQueryClient/postback.js"></script>
    <script type="text/javascript" src="../jQueryClient/databind.js"></script>
    <script type="text/javascript" src="../jQueryClient/jTemplates.js"></script>
    <script type="text/javascript" src="../jQueryClient/pagination.js"></script>
    <link rel="stylesheet" href="../css/pagination.css" />
    <script type="text/javascript" src="../jQueryClient/dataformat.js"></script>
    <script type="text/javascript" src="../jQueryClient/datejs.js"></script>
    <style type="text/css">
 
        #demo1 p
        {
            font-weight: bold;
            margin: 10px 0px 10px 0px;
        }
        #demo1content
        {
            padding: 10px;
            border: 3px solid #888;
        }
     
    </style>
    <div id="demo1">
        <div style="margin-bottom: 30px; font-style: italic; text-decoration: underline">
            This demo does not update the data on the server.
            <br />
            You can use <span style="color: #54A6DE;">$.doPostback</span> to make an async server
            call
        </div>
        <p>
            <span style="margin-right: 5px;">Please input keywords:</span>
            <input id="keyword" type="text" class="freshwhite" onkeyup="search()" />
        </p>
        <p>
            <span style="margin-bottom: 5px;">click header to sort data</span>
        </p>
        <p>
            <a id="aInsert" href="#" onclick="inserting()">++ insert a new movie ++</a>
        </p>
    </div>
    <div id="demo1content">
        <!-- The pagination will be shown here -->
        <div class="PaginationContainer">
        </div>
        <br style="clear: both;" />
        <!-- An empty div to show the actual table -->
        <div id="Container">
        </div>
        <!-- The template of the "repeater" -->
        <textarea id="template" style="display: none">
			<table>
				<tr>
					<th></th>
					<th></th>
					<th onclick="sort('Name')"> Name </th>
					<th onclick="sort('AverageRating')"> Average Rating </th>
					<th onclick="sort('Dvd.Available')"> DVD Available </th>
					<th onclick="sort('DateModified')"> Modified </th>
					<th></th>
					<th></th>
				</tr>
				{#foreach $T as d}
				<tr class="{#cycle values=['odd','even']}">
					<td> {$T.d$index + 1} </td>
					<td><img style="height: 75px;" src="{$T.d.__metadata.media_src}" /></td>
					<td> {$T.d.Name} </td>
					<td class="number"> 
						  {#if $T.d.AverageRating < 2} <span style="color: Red">{$T.d.AverageRating}</span> {#elseif $T.d.AverageRating
                        < 3} <span style="color: Orange">{$T.d.AverageRating}</span> {#else} {$T.d.AverageRating} {#/if}
					</td>
					<td> {$T.d.Dvd.Available ? 'Y' : 'N'} </td>
					<td> {$d.datetime.format($T.d.DateModified, "MMM/dd/yyyy")} </td>
					<td><a href="#" onclick="updating('{$T.d.Id}')">update</a></td>
					<td><a href="#" onclick="deleting('{$T.d.Id}')">delete</a></td>
				</tr>
				{#/for}
			</table>
		</textarea>
        <!-- template end -->
        <!-- The pagination will be shown here -->
        <div class="PaginationContainer">
        </div>
        <br style="clear: both;" />
    </div>
    <script type="text/javascript">
        $(function () {
            $.doPostback("http://odata.netflix.com/catalog/Titles?$format=json&$top=50&$callback=callback", {}, {
                dataType: "jsonp",
                callback: function (data) {
                    $("#Container").dataBind($("#template").text(), data.d, {
                        //show pageination in .PaginationContainer
                        page_container: '.PaginationContainer',
                        empty_text: '<span style="color:Red;">No data in the data source.</span>',
                        page_size: 3,
                        page_animation: 'fadein'
                    });
                }
            });
        });

        //search
        function search() {
            $("#Container").trigger('filter', ['Name', $('#keyword').val()]);
        }

        //show the detail form for inserting
        function inserting() {
            $.colorbox({
                width: "555px",
                height: "580px",
                iframe: true,
                href: "detail.html",
                overlayClose: false
            });
        }

        //insert
        //You have to call the backend code with $.doPostback function
        //to insert the data into database.
        function insert(obj) {
            $("#Container").trigger("insert", obj);
        }

        //show the detail form for updating
        function updating(id) {
            $.colorbox({
                width: "555px",
                height: "580px",
                iframe: true,
                href: "detail.html?id=" + id,
                overlayClose: false
            });
        }

        //update
        //You have to call the backend code with $.doPostback function
        //to update the data in database.
        function update(obj) {
            $("#Container").trigger("update", [obj, {
                id: "Id"
            }]);
        }

        //delete
        //You have to call the backend code with $.doPostback function
        //to delete the data in database.
        function deleting(id) {
            $("#Container").trigger('delete', [id, {
                id: "Id"
            }]);
        }

        //sorting
        var d = 1;
        function sort(field) {
            if (field == 'DateModified')
                $("#Container").trigger('sort', [field, d, 'datetime']);
            else
                $("#Container").trigger('sort', [field, d]);

            d *= -1;
        }
    </script>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="javascript" runat="Server">
    <pre name="javascriptcode" class="js:nocontrols">
		$(function() {
			$.doPostback("http://odata.netflix.com/catalog/Titles?$format=json&$top=50&$callback=callback", {}, {
				dataType : "jsonp",
				callback : function(data) {
					$("#Container").dataBind($("#template").text(), data.d, {
						//show pageination in .PaginationContainer
						page_container : '.PaginationContainer',
						empty_text : '<span style="color: Red;">No data in the data source.</span>',
						page_size : 3,
						page_animation : 'fadein'
					});
				}
			});
		});

		//search
		function search() {
			$("#Container").trigger('filter', ['Name', $('#keyword').val()]);
		}

		//show the detail form for inserting
		function inserting() {
			$.colorbox({
				width : "555px",
				height : "580px",
				iframe : true,
				href : "detail.html",
				overlayClose : false
			});
		}

		//insert
		//You have to call the backend code with $.doPostback function
		//to insert the data into database.
		function insert(obj) {
			$("#Container").trigger("insert", obj);
		}

		//show the detail form for updating
		function updating(id) {
			$.colorbox({
				width : "555px",
				height : "580px",
				iframe : true,
				href : "detail.html?id=" + id,
				overlayClose : false
			});
		}

		//update
		//You have to call the backend code with $.doPostback function
		//to update the data in database.
		function update(obj) {
			$("#Container").trigger("update", [obj, {
				id : "Id"
			}]);
		}

		//delete
		//You have to call the backend code with $.doPostback function
		//to delete the data in database.
		function deleting(id) {
			$("#Container").trigger('delete', [id, {
				id : "Id"
			}]);
		}

		//sorting
		var d = 1;
		function sort(field) {
			if(field == 'DateModified')
				$("#Container").trigger('sort', [field, d, 'datetime']);
			else
				$("#Container").trigger('sort', [field, d]);

			d *= -1;
		}
	</pre>
</asp:Content>
<asp:Content ID="Content5" ContentPlaceHolderID="html" runat="Server">
    <pre name="htmlcode" class="html:nocontrols"> 
		&lt;!-- The pagination will be shown here --&gt;
		&lt;div class=&quot;PaginationContainer&quot;&gt;&lt;/div&gt;
		&lt;br style=&quot;clear: both;&quot; /&gt;
		&lt;!-- An empty div to show the actual table --&gt;
		&lt;div id=&quot;Container&quot;&gt;&lt;/div&gt;
		&lt;!-- The template of the &quot;repeater&quot; --&gt;
		&lt;textarea id=&quot;template&quot; style=&quot;display: none&quot;&gt;
			&lt;table&gt;
				&lt;tr&gt;
					&lt;th&gt;&lt;/th&gt;
					&lt;th&gt;&lt;/th&gt;
					&lt;th onclick=&quot;sort(&#39;Name&#39;)&quot;&gt; Name &lt;/th&gt;
					&lt;th onclick=&quot;sort(&#39;AverageRating&#39;)&quot;&gt; Average Rating &lt;/th&gt;
					&lt;th onclick=&quot;sort(&#39;Dvd.Available&#39;)&quot;&gt; DVD Available &lt;/th&gt;
					&lt;th onclick=&quot;sort(&#39;DateModified&#39;)&quot;&gt; Modified &lt;/th&gt;
					&lt;th&gt;&lt;/th&gt;
					&lt;th&gt;&lt;/th&gt;
				&lt;/tr&gt;
				{#foreach $T as d}
				&lt;tr class=&quot;{#cycle values=[&#39;odd&#39;,&#39;even&#39;]}&quot;&gt;
					&lt;td&gt; {$T.d$index + 1} &lt;/td&gt;
					&lt;td&gt;&lt;img style=&quot;height: 75px;&quot; src=&quot;{$T.d.__metadata.media_src}&quot; /&gt;&lt;/td&gt;
					&lt;td&gt; {$T.d.Name} &lt;/td&gt;
					&lt;td class=&quot;number&quot;&gt; 
						  {#if $T.d.AverageRating &lt; 2} 
						  		&lt;span style=&quot;color: Red&quot;&gt;{$T.d.AverageRating}&lt;/span&gt; 
						  {#elseif $T.d.AverageRating &lt; 3} 
						  		&lt;span style=&quot;color: Orange&quot;&gt;{$T.d.AverageRating}&lt;/span&gt; 
						  {#else} 
						  		{$T.d.AverageRating} 
						  {#/if}
					&lt;/td&gt;
					&lt;td&gt; {$T.d.Dvd.Available ? &#39;Y&#39; : &#39;N&#39;} &lt;/td&gt;
					&lt;td&gt; {$d.datetime.format($T.d.DateModified, &quot;MMM/dd/yyyy&quot;)} &lt;/td&gt;
					&lt;td&gt;&lt;a href=&quot;#&quot; onclick=&quot;updating(&#39;{$T.d.Id}&#39;)&quot;&gt;update&lt;/a&gt;&lt;/td&gt;
					&lt;td&gt;&lt;a href=&quot;#&quot; onclick=&quot;deleting(&#39;{$T.d.Id}&#39;)&quot;&gt;delete&lt;/a&gt;&lt;/td&gt;
				&lt;/tr&gt;
				{#/for}
			&lt;/table&gt;
		&lt;/textarea&gt;
		&lt;!-- template end --&gt;
		&lt;!-- The pagination will be shown here --&gt;
		&lt;div class=&quot;PaginationContainer&quot;&gt;&lt;/div&gt;
	</pre>
</asp:Content>
